import {PageContainer} from '@ant-design/pro-components';
import React, { useState } from 'react';
import {
  Form,
  Input,
  Select,
  DatePicker,
  Switch,
  Checkbox,
  Upload,
  Table,
} from 'antd';
import {ColumnsType} from "antd/es/table";
const { RangePicker } = DatePicker;
const { TextArea } = Input;
interface DataType {
  key: React.Key;
  type: string;
  select: string
  msg: string;
}
const MarketList: React.FC = () => {
  const columns: ColumnsType<DataType> = [
    {
      dataIndex: 'type',
      render: (text: string) => text,
    },
    {
      dataIndex: 'msg',
      render: (text: string) => text,
    },
    {
      dataIndex: 'select',
      render: (text: string) => <a>{text}</a>,
    },

  ];
  let num=0;
  const data: DataType[] = [
    {
      key: '1',
      type: '全场',
      msg: '全店所有商品参与促销',
      select:''
    },
    {
      key: '2',
      type: '标签',
      msg: '包含选中标签的商品参与促销',
      select:'已选中'+num+'个标签'
    },
    {
      key: '3',
      type: '分类',
      msg: '选中分类下的商品参与促销',
      select:'已选中'+num+'个标签'
    },
    {
      key: '4',
      type: '商品',
      msg: '选择参与促销的商品',
      select:'已选中'+num+'个标签'
    },
  ];
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);

    },
  };
  const [selectionType, setSelectionType] = useState<'radio'>('radio');
  // @ts-ignore
  return (
    <PageContainer>
      <div style={{backgroundColor:'white',paddingTop:'50px',paddingBottom:"100px"}}>
        <Form
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 14 }}
          layout="horizontal"
        >
          <Form.Item label="促销类型：">
            <Select>
              <Select.Option value="0">请选择促销方式</Select.Option>
              <Select.Option value="1">打折/特价</Select.Option>
              <Select.Option value="2">梯度优惠</Select.Option>
              <Select.Option value="3">套餐促销</Select.Option>
              <Select.Option value="4">满额立减</Select.Option>
              <Select.Option value="5">换购促销</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item label="促销名称：">
            <Input/>
          </Form.Item>

          <Form.Item label="适用范围" name="disabled" valuePropName="checked"  rules={[{ required: true, message: '*实体店、网店请至少选择一项!' }]}>
            <Checkbox>实体店</Checkbox>
            <Checkbox>网店</Checkbox>
            <Checkbox>会员专享</Checkbox>
          </Form.Item>
          <Form.Item label="适用范围" name="disabled" valuePropName="checked"  rules={[{ required: true, message: '*外卖、自取请至少选择一项!' }]}>
            <Checkbox>外卖</Checkbox>
            <Checkbox>自取</Checkbox>
          </Form.Item>
          <Form.Item label="会员折上折">
            <Switch checkedChildren="是" unCheckedChildren="否" defaultChecked={false}/>
          </Form.Item>
          <Form.Item label="活动图片">
            <Upload
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              listType="picture"
              maxCount={1}
            >
             <Input value="请选择"  />
            </Upload>
          </Form.Item>

          <Form.Item label="日期时间">
              <RangePicker />
          </Form.Item>

          <Form.Item label="促销方式：">
            <Select>
              <Select.Option value="1">折扣促销</Select.Option>
              <Select.Option value="2">特价促销</Select.Option>
            </Select>
          </Form.Item>

          <Form.Item label="优惠折扣">
            <Input/>
          </Form.Item>

          <Form.Item label="限制优惠商品最大数量">
            <Switch checkedChildren="是" unCheckedChildren="否" defaultChecked={false}/>
          </Form.Item>

          <Form.Item label="选择参与促销的商品">
            <div>
              <Table
                rowSelection={{
                  type: selectionType,
                  ...rowSelection,
                }}
                columns={columns}
                dataSource={data}
                showHeader={false}
                pagination={false}
              />
            </div>
          </Form.Item>
          <Form.Item label="InputNumber">

          </Form.Item>
          <Form.Item label="TextArea">
            <TextArea rows={4} />
          </Form.Item>



        </Form>
      </div>
    </PageContainer>
  );
};

export default MarketList;
